<template>
    <div class="content">
        <el-card class="box-card">
            <el-row>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="命名空间">
                        <el-input v-model="ns" placeholder="命名空间"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                        <el-button type="primary" icon="el-icon-circle-plus" @click="editHandle(true)">新增</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel()">批量删除</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table ref="multipleTable" :data="pageData.list" border fit highlight-current-row :header-row-style="() => { return 'line-height:20px';}"
                :header-cell-style="{ background: 'rgb(55, 60, 100)',color: '#FFFFFF',textAlign: 'center',}" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column prop="ns" label="命名空间"></el-table-column>
                <el-table-column prop="name" label="空间名称"></el-table-column>
                <el-table-column prop="description" label="描述" width="400" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="dss" label="数据源" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="small" @click="hanldeChangeView('/ds',{ns: scope.row.ns})">{{ scope.row.dss }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-delete" @click="handleDel(scope.row.ns)" size="small">删除</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="editHandle(false,scope.row.ns)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <!-- 通过@refreshDataList自定义事件给新增和编辑组件传递函数调用 -->
            <add-or-update v-if="visible" ref="addOrUpdate" @refreshDataList="refreshDataList"></add-or-update>
        </el-card>
    </div>
</template>
<script>
    import { nsPage, nsDel } from '../../api/ns'
    import AddOrUpdate from './AddOrUpdate.vue';
    export default {
        mounted() {
            this.getPageList()
        },
        components: {
            AddOrUpdate
        },
        data() {
            return {
                visible: false,
                ns: ''
            }
        },
        computed: {
        },
        methods: {
            refreshDataList() {
                this.visible = false
                this.getPageList();
            },
            // 新增 / 修改
            editHandle(isAdd, ns) {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(isAdd, ns)
                })
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.ns);
            },
            handleBatchDel() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '请选择需要删除的数据'
                    })
                } else {
                    this.$confirm('确认要删除吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        nsDel(this.multipleSelection).then((res) => {
                            this.$message({ message: '删除成功！', type: 'success' })
                            this.getPageList()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    })
                }
            },
            handleClear() {
                this.ns = ''
                this.getPageList()
            },
            getPageList() {
                nsPage(this.ns, this.page.page, this.page.limit).then((res) => {
                    let data = res.data
                    this.pageData = data
                })
            }
        }
    }
</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}
.selection-button {
    margin-top: 20px;
    left: 0%;
}
</style>
